<?php
session_start();
include_once 'admin/connect.php';
include_once 'head.php';

// 验证登录
if(!isset($_SESSION['loginadmin'])) {
    echo "<script>alert('请先登录后查看！');window.location.href='admin/login.php';</script>";
    exit;
}

// 获取文章ID
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
if($id == 0) {
    header('Location: little.php');
    exit;
}

// 查询文章内容
$sql = "SELECT * FROM article WHERE id = ?";
$stmt = $connect->prepare($sql);
$stmt->bind_param('i', $id);
$stmt->execute();
$result = $stmt->get_result();
$article = $result->fetch_assoc();

if(!$article) {
    header('Location: little.php');
    exit;
}

// 在显示文章内容前处理图片路径
$content = $article['articletext'];

// 处理图片路径
$content = preg_replace_callback('/<img[^>]*src=(["\'])([^"\']+)\1[^>]*>/i', function($matches) {
    $full_img_tag = $matches[0]; // 完整的img标签
    $quote = $matches[1]; // 引号类型 (' 或 ")
    $src = $matches[2]; // 图片路径
    
    // 如果是相对路径但不是以/开头，添加/
    if($src && !preg_match('/^(https?:\/\/|\/)/i', $src)) {
        $new_src = '/' . $src;
        $full_img_tag = str_replace('src=' . $quote . $src . $quote, 'src=' . $quote . $new_src . $quote, $full_img_tag);
    }
    
    // 添加onerror处理
    if(strpos($full_img_tag, 'onerror=') === false) {
        $onerror = ' onerror="this.onerror=null;this.src=\'/Style/images/image-placeholder.png\';this.alt=\'图片加载失败\';"';
        $full_img_tag = str_replace('<img', '<img' . $onerror, $full_img_tag);
    }
    
    return $full_img_tag;
}, $content);

// 记录处理后的内容
error_log("处理后的文章内容: " . substr($content, 0, 200) . "...");
?>

<head>
    <meta charset="utf-8" />
    <title><?php echo $article['articletitle'] ?> - <?php echo $text['title'] ?></title>
    <!-- 引入 editor.md 的样式 -->
    <link rel="stylesheet" href="/admin/editormd/css/editormd.preview.css" />
    <link rel="stylesheet" href="/admin/editormd/css/editormd.css" />
    <style>
        .article-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .article-title {
            font-size: 1.8em;
            color: #333;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .article-meta {
            text-align: center;
            color: #666;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .article-content {
            line-height: 1.8;
        }
        
        .article-content img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            margin: 10px 0;
        }
        
        .editormd-html-preview {
            width: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="article-container">
        <h1 class="article-title"><?php echo htmlspecialchars($article['articletitle']) ?></h1>
        <div class="article-meta">
            <span><?php echo htmlspecialchars($article['articlename']) ?></span>
            <span> · </span>
            <span><?php echo $article['articletime'] ?></span>
        </div>
        
        <!-- Markdown 内容显示区域 -->
        <div id="article-content" class="article-content">
            <textarea style="display:none;"><?php echo htmlspecialchars($content) ?></textarea>
        </div>
    </div>

    <!-- 引入必要的 JS -->
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="/admin/editormd/editormd.js"></script>
    <script src="/admin/editormd/lib/marked.min.js"></script>
    <script src="/admin/editormd/lib/prettify.min.js"></script>
    <script src="/admin/editormd/lib/raphael.min.js"></script>
    <script src="/admin/editormd/lib/underscore.min.js"></script>
    <script src="/admin/editormd/lib/sequence-diagram.min.js"></script>
    <script src="/admin/editormd/lib/flowchart.min.js"></script>
    <script src="/admin/editormd/lib/jquery.flowchart.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 初始化编辑器预览
            editormd.markdownToHTML("article-content", {
                markdown: $(".article-content textarea").text(),
                htmlDecode: "style,script,iframe",
                tocm: true,
                emoji: true,
                taskList: true,
                tex: false,          // 禁用TeX数学公式
                flowChart: false,    // 禁用流程图
                sequenceDiagram: false, // 禁用时序图
                // 图片处理
                imageLoadComplete: function(imageInfo) {
                    console.log(imageInfo);
                }
            });
            
            // 修复图片路径问题
            setTimeout(function() {
                fixImagePaths();
            }, 500);
            
            // 修复图片路径的函数
            function fixImagePaths() {
                console.log("开始修复图片路径");
                $('.article-content img').each(function() {
                    var src = $(this).attr('src');
                    console.log("检查图片: " + src);
                    
                    // 如果是相对路径但不是以/开头，添加/
                    if(src && !src.startsWith('http') && !src.startsWith('/')) {
                        var newSrc = '/' + src;
                        console.log("修复相对路径: " + src + " -> " + newSrc);
                        $(this).attr('src', newSrc);
                    }
                    
                    // 处理图片加载错误
                    $(this).on('error', function() {
                        console.log("图片加载失败: " + $(this).attr('src'));
                        // 尝试不同的路径格式
                        var originalSrc = $(this).attr('src');
                        if(originalSrc.startsWith('/uploads/images/')) {
                            // 尝试不同的路径
                            var altSrc = originalSrc.replace('/uploads/images/', '/uploads/');
                            console.log("尝试替代路径: " + altSrc);
                            $(this).attr('src', altSrc);
                        }
                    });
                });
            }
        });
    </script>

    <script>
    // 调试图片加载
    $(document).ready(function() {
        console.log("页面加载完成，开始检查图片");
        
        // 列出所有图片
        var images = document.querySelectorAll('img');
        console.log("页面上共有 " + images.length + " 张图片");
        
        // 检查每张图片
        images.forEach(function(img, index) {
            console.log("图片 #" + index + ": " + img.src);
            
            // 添加加载事件监听
            img.addEventListener('load', function() {
                console.log("图片加载成功: " + this.src);
            });
            
            // 添加错误事件监听
            img.addEventListener('error', function() {
                console.error("图片加载失败: " + this.src);
                
                // 尝试修复路径
                var originalSrc = this.src;
                var urlParts = new URL(originalSrc);
                var pathName = urlParts.pathname;
                
                // 尝试不同的路径组合
                var altPaths = [
                    pathName,                                // 原始路径
                    pathName.replace('/uploads/images/', '/uploads/'),  // 尝试不同的目录
                    '/uploads/' + pathName.split('/').pop(),            // 只使用文件名
                    '/uploads/images/' + pathName.split('/').pop()      // 只使用文件名但在images目录
                ];
                
                console.log("尝试以下替代路径:");
                altPaths.forEach(function(path) {
                    console.log(" - " + path);
                });
                
                // 显示占位图
                this.src = '/Style/images/image-placeholder.png';
                this.alt = '图片加载失败';
            });
        });
    });
    </script>

    <?php include_once 'footer.php'; ?>
</body>
</html>